<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>mvvm</title>
  </head>
  <body>
    <!-- 
      mvvm框架，数据响应式框架，视图更新会影响到数据，数据的更新会影响到视图
    -->
    <div>
      <h3 id="title"></h3>
      <input type="text" id="username" />
    </div>

    <script>
      // 普通数据，对它进行直接的修改，它是不会有触发任务的操作
      // 此时就需要一个对对象进行监听的方法
      // 作业：总结两者的区别
      // Object.defineProperty   es5
      // Proxy  es6
      // vue3中它对数据的监听使用的就是Proxy，而vue2使用的是defineProperty
      let targetData = {
        username: 'admin'
      }

      // 响应式数据
      let data = new Proxy(targetData, {
        // 在通过data对象调用属性时返回的数据,它会触发
        // 例：data.username
        get(target, property) {
          console.log('get')
          return target[property]
        },
        // 在通过ddata对象设置某一个属性时会触发
        // 例：data.username = 'abc'  newValue就是abc
        // 在严格模式下，set必须要返回一个true
        set(target, property, newValue) {
          console.log('set')
          target[property] = newValue
          // 在修改数据时更新视图
          // vue在此处进行新旧虚拟dom的比对工作，比对完成后更新视图
          diffHandle()
          return true
        }
      })

      showTitle()

      function showTitle() {
        document.getElementById('title').textContent = data.username
        document.getElementById('username').value = data.username
      }

      function diffHandle() {
        // 进行了比对
        showTitle()
      }

      document
        .getElementById('username')
        .addEventListener('input', function () {
          data.username = this.value
          showTitle()
          console.log(data.username)
        })
    </script>
  </body>
</html>
